import { Component, OnInit } from '@angular/core';
import { HttpRequest } from "../../../service/httpRequest";

import * as echarts from 'echarts';

@Component({
  selector: 'chart-run',
  template: `
      <p>
      <span>{{ 'dashboard.stat.RUNINGNUM' | translate}}</span>：
      <span>{{runData[0]}}{{ 'faultstatistics.content.piestat.UNIT' | translate}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span>{{ 'dashboard.stat.NOTRUNINGNUM' | translate}}</span>：
      <span>{{runData[1]}}{{ 'faultstatistics.content.piestat.UNIT' | translate}}</span>
    </p>
    <div id="run" style="height: 260px;font-size:12px"></div>

  `
})
export class RunComponent implements OnInit {

  option;
  myRun:any;
  runData:Array<number> = [0,0];

  constructor(private httpRequest:HttpRequest) { }

  ngOnInit() {
    this.myRun = echarts.init(document.getElementById('run'));
    this.paintRun();
  }

  paintRun(){
    let ti_cn = '设备运行率';
    let suti_cn = '设备运行总数占总设备数的比例';
    let sm_cn = '比例';
    let para1_cn = '运行';
    let para2_cn = '未运行';
    let ti_en = 'Operation Account';
    let suti_en = 'Proportion of Operation Devices';
    let sm_en = 'Proportion';
    let para1_en = 'In running';
    let para2_en = 'Shutdown';

    let ti1_cn = '设备加载率';
    let suti1_cn = '设备加载总数占设备运行数的比例';
    let sm1_cn = '比例';
    let para11_cn = '加载中';
    let para21_cn = '未加载';
    let ti1_en = 'Loading Account';
    let suti1_en = 'Proportion of Loading Devices';
    let sm1_en = 'Proportion';
    let para11_en = 'In loading';
    let para21_en = 'In no loading';

    this.httpRequest.sendGet('stat/online').subscribe(res => {
      this.runData = res;

      if(localStorage.getItem('language') == 'en'){
        this.run(ti_en,suti_en,sm_en,para1_en,para2_en,res);
      }
      else{
        this.run(ti_cn,suti_cn,sm_cn,para1_cn,para2_cn,res);
      }
    },err => console.log(err));
  }

  run(ti,suti,sm,para1,para2,data) {
    this.option = {
      title: {
        text: ti,
        subtext: suti,
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{b} <br/>{a} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: [para1, para2]
      },
      series: [{
        type: 'pie',
        name: sm,
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          {name:para1, value:data[0],color:'red'},
          {name:para2, value:data[1],color:'red'}
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          normal: {
            label:{
              show: true,
              formatter: '{b} : ({d}%)'
            }
          },
        }
      }],
      color:['#78B4E6','#A8A8A8']
    };
    this.myRun.setOption(this.option);
  }

}
